<template>
  <div id="service-cloud">
    <div class="form-wrap mb20">
      <div class="form-title">{{form1.title}}：</div>
      <div class="vertical-align-flex">
        <div class="field">{{form1.fields[0].label}}：</div>
        <div class="value">
          <span class="value-text">{{connect_status}}</span>
        </div>
      </div>
      <div class="vertical-align-flex">
        <div class="field">{{form1.fields[1].label}}：</div>
        <div class="value">
          <input class="input-none bottom-line" v-model="cloud_login.ngrokid">
          <span class="add" @click="change_ngrokid">{{form1.fields[1].operate}}</span>
        </div>
      </div>
      <div class="vertical-align-flex">
        <div class="field">{{form1.fields[2].label}}：</div>
        <div class="value">
          <a class="add" href="#">https://78a351533f40.ac-link.com:84/service_apply.html</a>
        </div>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue">{{$t('btn.disable')}}</div>
      </div>
    </div>
    <div class="form-wrap mb20">
      <div class="form-title">{{form2.title}}：</div>
      <div class="vertical-align-flex">
        <div class="field">{{form2.fields[0].label}}：</div>
        <div class="value">
          <input class="input-none bottom-line">
          <span class="add">{{form2.fields[0].operate}}</span>
        </div>
      </div>
      <div class="vertical-align-flex">
        <div class="field">{{form2.fields[1].label}}：</div>
        <div class="value">
          <input class="input-none bottom-line">
        </div>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue">{{$t('btn.save')}}</div>
      </div>
    </div>
    <div class="toolbar">{{$t('service.cloud.toolbar')}}</div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        cloud_login: {}
      }
    },
    computed: {
      form1(){
        return this.$t('service.cloud.form1')
      },
      form2() {
        return this.$t('service.cloud.form2')
      },
      connect_status(){
        if(this.cloud_login.status){
          return '已连接（1161）'
        } else {
          return '未连接'
        }
      }
    },
    created(){
      this.$bus.emit('changeTab', 0)
      this.get_cloud_login()
      this.get_ac_info()
    },
    methods: {
      get_cloud_login(){
        this.$req.get('/webapi?op=get_cloud_login').then(res=> {
          console.log(res)
          this.cloud_login = res
        })
      },
      get_ac_info(){
        this.$req.get('/webapi?op=get_ac_info').then(res=> {
          console.log(res)
        })
      },
      change_ngrokid(){
        this.$req.get('/webapi?op=get_cloud_login_1580953145547', {
          params: {
            ngrokid: this.cloud_login.ngrokid
          }
        }).then(res=> {
          this.$message.success('修改云登录标识成功！')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
